<!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>客服</title>
        <meta name="format-detection" content="telephone=no,email=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0,viewport-fit=cover">
        <link href="__PUBLIC__/Admin/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
        <link href="__PUBLIC__/Admin/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
        <link href="__PUBLIC__/Admin/css/animate.min.css" rel="stylesheet">
        <script>
            ;
            (function (win, lib) {
                var doc = win.document;
                var docEl = doc.documentElement;
                var metaEl = doc.querySelector('meta[name="viewport"]');
                var flexibleEl = doc.querySelector('meta[name="flexible"]');
                var dpr = 0;
                var scale = 0;
                var tid;
                var flexible = lib.flexible || (lib.flexible = {});

                if (metaEl) {
                    // console.warn('将根据已有的meta标签来设置缩放比例');
                    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
                    if (match) {
                        scale = parseFloat(match[1]);
                        dpr = parseInt(1 / scale);
                    }
                } else if (flexibleEl) {
                    var content = flexibleEl.getAttribute('content');
                    if (content) {
                        var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
                        var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
                        if (initialDpr) {
                            dpr = parseFloat(initialDpr[1]);
                            scale = parseFloat((1 / dpr).toFixed(2));
                        }
                        if (maximumDpr) {
                            dpr = parseFloat(maximumDpr[1]);
                            scale = parseFloat((1 / dpr).toFixed(2));
                        }
                    }
                }
                if (!dpr && !scale) {
                    var isAndroid = win.navigator.appVersion.match(/android/gi);
                    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
                    var devicePixelRatio = win.devicePixelRatio;
                    if (isIPhone) {
                        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
                        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                            dpr = 3;
                        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                            dpr = 2;
                        } else {
                            dpr = 1;
                        }
                    } else {
                        // 其他设备下，仍旧使用1倍的方案
                        dpr = 1;
                    }
                    scale = 1 / dpr;
                }
                docEl.setAttribute('data-dpr', dpr);
                if (!metaEl) {
                    metaEl = doc.createElement('meta');
                    metaEl.setAttribute('name', 'viewport');
                    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale +
                        ', user-scalable=no');
                    if (docEl.firstElementChild) {
                        docEl.firstElementChild.appendChild(metaEl);
                    } else {
                        var wrap = doc.createElement('div');
                        wrap.appendChild(metaEl);
                        doc.write(wrap.innerHTML);
                    }
                }

                function refreshRem() {
                    var width = docEl.getBoundingClientRect().width;
                    if (width / dpr > 750) {
                        width = 750 * dpr;
                    }
                    var rem = width / 10;
                    docEl.style.fontSize = rem + 'px';
                    flexible.rem = win.rem = rem;
                }
                win.addEventListener('resize', function () {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 100);
                }, false);
                win.addEventListener('pageshow', function (e) {
                    if (e.persisted) {
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 100);
                    }
                }, false);
                if (doc.readyState === 'complete') {
                    doc.body.style.fontSize = 12 * dpr + 'px';
                } else {
                    doc.addEventListener('DOMContentLoaded', function (e) {
                        doc.body.style.fontSize = 12 * dpr + 'px';
                    }, false);
                }

                refreshRem();
                flexible.dpr = win.dpr = dpr;
                flexible.refreshRem = refreshRem;
                flexible.rem2px = function (d) {
                    var val = parseFloat(d) * this.rem;
                    if (typeof d === 'string' && d.match(/rem$/)) {
                        val += 'px';
                    }
                    return val;
                }
                flexible.px2rem = function (d) {
                    var val = parseFloat(d) / this.rem;
                    if (typeof d === 'string' && d.match(/px$/)) {
                        val += 'rem';
                    }
                    return val;
                }
            })(window, window['lib'] || (window['lib'] = {}));
        </script>
    </head>
    <style type="text/css">
        body {
            background-color: #ededed; 
            margin: 0;
            padding: 0;
            position: relative;
            padding-top: constant(safe-area-inset-top);
            padding-right: constant(safe-area-inset-right);
            padding-bottom: constant(safe-area-inset-bottom);
            padding-left: constant(safe-area-inset-left);
            overflow-y:scroll ;
            position: relative;
        }
        body::-webkit-scrollbar {
            width: 0;
            height: 0;
            display: none;
        }
        footer {
            width: 100vw;
            height: 60px;
            left: 50%;
            transform: translate(-50%);
            background-color: #f7f7f7;
            position: fixed;
            bottom: 0;
            z-index: 1111;
            display: flex;
            justify-content: space-around;
            box-sizing: border-box;
            padding: 5px 0;
        }

        footer a {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
            text-align: center;
            text-decoration: none;
            -webkit-tap-highlight-color: #f7f7f7;
            -webkit-user-select: none;
            -moz-user-focus: none;
            -moz-user-select: none;
            font-size: 0.246rem;
            height: 100%;
        }
        footer p{
            color: #aeadad;
            font-size: 12px;
            font-weight: 400;
            margin: 0;
        }
        .headerTop{
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 24px;
            box-sizing: border-box;
            height: 68px;
        }
        .headerTop img{
            width: 0.6rem;
        }
        .header-top{
            width: 100%;
            padding: 28px 0;
            box-sizing: border-box;
            color: #323332;
            font-weight: bold;
            font-size: 0.42rem;
            text-align: center;
        }
        .code-con{
            width: 84vw;
            padding: 12px 16px 24px 16px;
            border-radius: 6px;
            background-color: #fff;
            margin: 36px auto 0 auto;
            box-sizing: content-box;
        }
        .code-header{
            display: flex;
            align-items: center;
        }
        .code-header>img{
            border-radius: 6px;
            width: 2rem;
            box-sizing: content-box;
            padding-right: 16px;
        }
        .code-header p{
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
        }
        .code-box{
            width: 82%;
            padding: 16px 0;
            box-sizing: content-box;
            margin: 0 auto;
        }
        .code-box>img{
            width: 100%;
         
        }
        .code-bottom{
            display: block;
            font-size: 0.35rem;
            margin: 0 auto;
            text-align: center;
            font-weight: 480;
            color: #a9a9a9;
        }
    </style>
    <body>
        <div class="customer-con">
            <header>
                <div class="headerTop">
                    <img src="__PUBLIC__/Home/img/game_right.png" onclick="window.location.href = '/Home/Run/index'" style="transform: rotate(180deg);" alt="">
                    <div class="header-top">Customer Service QR Code</div>
                    <div  id="selectMenu" class="selectMenu">
                    </div>
                </div>
            </header>
            <div class="code-con">
                <div class="code-header">
                    <img src="__ROOT__/Uploads/{$info.7}" alt="">
                    <p>
                        <strong style="font-size:0.36rem;color: #514949;">{$info.5}</strong>
                        <span style="font-size:0.3rem;color: #a9a9a9;">{$info.6}</span>
                    </p>
                </div>
                <div class="code-box">
                    <img  src="__ROOT__/Uploads/{$info.1}" alt="">
                </div>
                <span class="code-bottom">Scan the QR code above, add me on WeChat</span>
            </div>
            <footer>
                <a href="/Home/Run/index">
                    <img src="__PUBLIC__/Home/img/11.png" alt="" style="width:24px">
                    <p>news</p>
                </a>
                <a href="javascript:void(0)">
                    <img src="__PUBLIC__/Home/img/14s.png" alt="" style="width:24px">
                    <p style="color:#07c160;">Customer service</p>
                </a>
                <a href="{:U('Home/User/index')}">
                    <img src="__PUBLIC__/Home/img/13.png" alt="" style="width:24px">
                    <p>mine</p>
                </a>  
            </footer>
        </div>
        <script src="__PUBLIC__/Admin/js/jquery.min.js?v=2.1.4"></script>
        <script src="__PUBLIC__/Admin/js/bootstrap.min.js?v=3.3.6"></script>
        <script src="__PUBLIC__/Common/js/ajaxForm.js"></script>
        <script src="__PUBLIC__/layer/layer.js"></script>
        <script>
            var ua = window.navigator.userAgent.toLowerCase(); 
            if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                //在微信中打开需要的操作
                $('.headerTop').html('')
            } else {
            //不在微信中打开
            } 
        </script>
    </body>
</html>